import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { View, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { QRCode } from 'taro-code';
import pBack from '@/images/common/back.svg';
import pPayCard from '@/images/paymentCode/payCard.png';
import pRight from '@/images/common/rightGray.svg';
import pRefresh from '@/images/paymentCode/refresh.png';
import pWechart from '@/images/paymentCode/wechart.png';
import CardSelect from './cardSelect/index';
import './index.scss';

const goBack = () => {
  Taro.navigateBack();
};

const getPx = (number, designWidth = 750) => {
  const sys = Taro.getSystemInfoSync();
  const scale = sys.screenWidth / designWidth; // 缩放比例
  return parseInt(number * scale); // 返回缩放后的值
};

const PaymentCodePage = ({ dispatch }) => {
  const [cardList, setCardList] = useState([]);
  const [cardSelected, setCardSelected] = useState(null);
  const [cardDate, setCardDate] = useState(null);
  const [isOpened, setIsOpened] = useState(false);
  let timer = null;

  useEffect(() => {
    dispatch({
      type: 'otherApi/getCardListByUserIdModel',
      payload: { status: 1 },
    }).then((list) => {
      if (list.length > 0) {
        setCardSelected(list[0]);
        setCardList(list);
      }
    });
  }, []);

  useEffect(() => {
    cardSelected && getQRCode();
    if (cardSelected) {
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(() => getQRCode(), 30000);
    }
    return () => clearInterval(timer);
  }, [cardSelected]);

  const getQRCode = () => {
    dispatch({
      type: 'otherApi/getCardByIdModel',
      payload: { cardId: cardSelected.id },
    }).then((ret) => {
      ret && setCardDate(ret.cardDate);
    });
  };

  const handleCardSelectWin = () => {
    if (cardList.length > 0) {
      setIsOpened(true);
    }
  };

  const handleCloseWin = (cardSel) => {
    setIsOpened(false);
    setCardSelected(cardSel);
  };

  return (
    <View className="paymentCodePage">
      <View
        className="topBar"
        style={{
          height: Taro.$titleHeight + 'px',
          top: Taro.$statusBarHeight + 'px',
        }}
      >
        <Image className="backIcon" src={pBack} onclick={goBack} />
        <Text className="title"></Text>
        <View className="backIcon"></View>
      </View>
      <View
        className="card"
        style={{ marginTop: Taro.$statusBarHeight + Taro.$titleHeight + 'px' }}
      >
        <View className="qrCode">
          {cardDate && (
            <QRCode text={cardDate} size={getPx(360)} errorCorrectLevel="M" typeNumber={2} />
          )}
        </View>
        <View className="info">
          <Text className="tip">30秒自动更新</Text>
          <Image className="opIcon" src={pRefresh} />
        </View>
        <View className="bank">
          <Image className="cardIcon" src={pPayCard} />
          {cardSelected ? (
            <View className="bankInfo">
              <View className="infoUp">
                <Text className="unit">¥</Text>
                <Text className="cnt">{cardSelected.balance}</Text>
              </View>
              <Text className="bankNo">{cardSelected.cardNum.replace(/(.{4})/g, '$1 ')}</Text>
            </View>
          ) : (
            <View className="noCard">暂无可用卡</View>
          )}

          <View
            className="opArea"
            onClick={() => {
              cardSelected !== null && handleCardSelectWin();
            }}
          >
            <Text className={['opNmae', cardSelected === null && 'unable']}>切换</Text>
            <Image className="opIcon" src={pRight} />
          </View>
        </View>
      </View>
      <View className="wechart">
        <Image className="wechartIcon" src={pWechart} />
        <Text className="wechartPay">使用微信支付</Text>
      </View>
      <CardSelect
        isOpened={isOpened}
        cardList={cardList}
        curCard={cardSelected}
        handleClose={handleCloseWin}
      />
    </View>
  );
};

export default connect(() => ({}))(PaymentCodePage);
